<%--
  Created by IntelliJ IDEA.
  User: mabo
  Date: 2010-1-11
  Time: 10:36:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Simple jsp page</title>
    <style type="text/css">
        html, body {
            font: normal 11px verdana;
        }

        #main-panel td {
            padding: 5px;
        }
    </style>


    <script type="text/javascript">
        Ext.onReady(function() {
            var panel = new Ext.Panel({
                id:'main-panel',
                baseCls:'x-plain',
                renderTo: Ext.getBody(),//制定显示位置
                layout:'table',//布局
                layoutConfig: {columns:2},
                // applied to child components
                defaults: {frame:true, width:200, height: 200},
                items:[
                    {
                        title:'Item 1',
                        id:'Item_1',
                        width:(Ext.getBody().getWidth() - 20) / 2
                    },
                    {
                        title:'Item 2',
                        id:'Item_2',
                        width:(Ext.getBody().getWidth() - 20) / 2
                    },
                    {
                        title:'Item 3',
                        id:'Item_3',
                        colspan:2,
                        width:Ext.getBody().getWidth() - 10
                    }
                ]
            });
        });

        window.onresize = function() {
            Ext.get('Item_1').setWidth((Ext.getBody().getWidth() - 20) / 2);
            Ext.get('Item_2').setWidth((Ext.getBody().getWidth() - 20) / 2);
            Ext.get('Item_3').setWidth(Ext.getBody().getWidth() - 10);
        }

    </script>
</head>
<body>
</body>
</html>